<template>
	<view class="main">
		<ul>
		  <li>
		    <view class="msg">
		      个人头像
		    </view>
		    <view class="avatar" @click="changeAvatar">
		      <image :src="info.avatar" mode=""></image>
		    </view>
		  </li>
		  <li @click="toChangePhone">
		    <view class="msg">
		      绑定手机号
		    </view>
		    <view class="txt" style="display: flex;align-items: center;">
		      {{info.mobile || '-'}}
		      <u-icon name="arrow-right" color="#000" size="16"></u-icon>
		    </view>
		  </li>
		  <li @click="changeNickname">
		    <view class="msg">
		      昵称
		    </view>
		    <view class="nickname-box">
		      <text class="nickname">{{info.nickname || '-'}}</text>
		      <u-icon name="edit-pen" color="#999" size="16"></u-icon>
		    </view>
		  </li>
		  <li v-if="info.is_auth == 1">
		    <view class="msg">
		      姓名
		    </view>
		    <view class="txt">
		      {{info.realname || '-'}}
		    </view>
		  </li>
		  <li v-if="info.is_auth == 1">
		    <view class="msg">
		      身份证号
		    </view>
		    <view class="txt">
		      {{info.IDcard || '-'}}
		    </view>
		  </li>
		  <li v-if="info.agent_level > 0">
		    <view class="msg">
		      代理级别
		    </view>
		    <view class="txt" v-if="info.agent_level == 4">
		      乡镇代理
		    </view>
		    <view class="txt" v-if="info.agent_level == 3">
		      区县代理
		    </view>
		    <view class="txt" v-if="info.agent_level == 2">
		      地级市代理
		    </view>
		    <view class="txt" v-if="info.agent_level == 1">
		      省直辖市代理
		    </view>
		  </li>
		  <li v-if="info.agent_level > 0">
		    <view class="msg">
		      代理区域
		    </view>
		    <view class="txt">
		      {{info.agent_area == '' ? '请先设置代理级别' : info.agent_area}}
		    </view>
		  </li>
		  <li v-if="info.is_password2 == 0" @tap="routerTo('/pageB/psd2')">
		    <view class="msg">
		      设置二级密码
		    </view>
		    <view class="txt">
		      <u-icon name="arrow-right" color="#000" size="16"></u-icon>
		    </view>
		  </li>
		  <li v-if="info.is_password2 == 1" @tap="routerTo('/pageB/psd2?type=1')">
		    <view class="msg">
		      修改二级密码
		    </view>
		    <view class="txt">
		      <u-icon name="arrow-right" color="#000" size="16"></u-icon>
		    </view>
		  </li>
		  <li @tap="routerTo('/pageB/upPsd')">
		    <view class="msg">
		      修改登录密码
		    </view>
		    <view class="txt">
		      <u-icon name="arrow-right" color="#000" size="16"></u-icon>
		    </view>
		  </li>
		  <li v-if="info.is_auth == 0" @tap="routerTo('/pageB/renzheng')">
		    <view class="msg">
		      实名认证
		    </view>
		    <view class="txt">
		      <u-icon name="arrow-right" color="#000" size="16"></u-icon>
		    </view>
		  </li>
		  
		  <!-- 以下三个项目仅在rank为1时显示 -->
		  <li v-if="info.rank == 1" @tap="routerTo('/pageC/recharge')">
		    <view class="msg">
		      充值管理
		    </view>
		    <view class="txt">
		      <u-icon name="arrow-right" color="#000" size="16"></u-icon>
		    </view>
		  </li>
		  <li v-if="info.rank == 1" @tap="routerTo('/pageB/card')">
		    <view class="msg">
		      银行卡管理
		    </view>
		    <view class="txt">
		      <u-icon name="arrow-right" color="#000" size="16"></u-icon>
		    </view>
		  </li>
		  <li v-if="info.rank == 1" @tap="routerTo('/pages/sub/sub')">
		    <view class="msg">
		      创建子账号
		    </view>
		    <view class="txt">
		      <u-icon name="arrow-right" color="#000" size="16"></u-icon>
		    </view>
		  </li>
			<!-- <li @tap="routerTo('/pageB/zfb')">
				<view class="msg">
					账户信息
				</view>
				<view class="txt">
					<u-icon name="arrow-right" color="#000" size="16"></u-icon>
				</view>
			</li> -->
			<!-- <li @tap="routerTo('/pageB/text?name=Agreement&title=用户协议')">
				<view class="msg">
					用户协议
				</view>
				<view class="txt">
					<u-icon name="arrow-right" color="#fff" size="16"></u-icon>
				</view>
			</li>
			<li @tap="routerTo('/pageB/text?name=Privacy&title=隐私政策')">
				<view class="msg">
					隐私政策
				</view>
				<view class="txt">
					<u-icon name="arrow-right" color="#fff" size="16"></u-icon>
				</view>
			</li> -->
		</ul>
		<view class="btn" @tap="outLogin">
			退出登录
		</view>
	</view>
</template>

<script>
	import {
		user,
		// upUserInfo
	} from '@/api/index.js'
	export default {
		data() {
			return {
				info: {}
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			async getInfo() {
				let res = await user();
				this.info = res.data;
				// 从缓存中读取头像和昵称
				const cachedAvatar = uni.getStorageSync('avatarUrl');
				const cachedNickname = uni.getStorageSync('nickname');
				if (cachedAvatar) {
					this.info.avatar = cachedAvatar;
				}
				if (cachedNickname) {
					this.info.nickname = cachedNickname;
				}
			},
			
			 switchToAdvancedAccount() {
			    // 切换到高级账户
			    uni.setStorageSync('userType', 'my');
			    uni.$emit('userTypeChanged', 'my');
			    uni.reLaunch({ url: '/pages/my/my' });
			  },
			  
			  switchToNormalAccount() {
			    // 切换到普通账户
			    uni.setStorageSync('userType', 'users');
			    uni.$emit('userTypeChanged', 'users');
			    uni.reLaunch({ url: '/pages/my/users' });
			  },
			
			changeAvatar() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success: (res) => {
						this.uploadFilePromise(res.tempFilePaths[0]);
					}
				});
			},
			uploadFilePromise(url) {
			      return new Promise((resolve, reject) => {
			        uni.uploadFile({
			          url: 'https://www.zpyd.top/api/common/upload',
			          filePath: url,
			          name: 'file',
			          header: {
			            'token': uni.getStorageSync('token')
			          },
			          formData: {
			            user: 'test'
			          },
			          success: (res) => {
			            let ndata = JSON.parse(res.data);
			            this.info.avatar = ndata.data.fullurl; // 更新头像
			            uni.setStorageSync('avatarUrl', ndata.data.fullurl); // 存储到缓存
			            uni.showToast({
			              title: '头像上传成功',
			              icon: 'none'
			            });
			          }
			        });
			      });
			    },
			changeNickname() {
			      uni.showModal({
			        title: '修改昵称',
			        content: '请输入新的昵称',
			        editable: true,
			        placeholderText: this.info.nickname || '请输入昵称',
			        success: (res) => {
			          if (res.confirm && res.content) {
			            this.info.nickname = res.content; // 更新昵称
			            uni.setStorageSync('nickname', res.content); // 存储到缓存
			            uni.showToast({
			              title: '昵称修改成功',
			              icon: 'none'
			            });
			          }
			        }
			      });
			    },
			async upUserInfo(data) {
				try {
					const res = await upUserInfo(data);
					if (res.code === 1) {
						uni.showToast({
							title: '更新成功',
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: res.msg || '更新失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
				}
			},
			outLogin() {
				uni.removeStorageSync('token')
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			routerTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			toChangePhone() {
				uni.navigateTo({
					url: "/pageB/ChangePhone"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.main {
  ul {
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 40rpx;
      border-bottom: 1rpx solid #f0f0f0; // 添加分割线

      .msg {
        font-size: 28rpx;
        color: #333;
      }

      .nickname-box {
        display: flex;
        align-items: center;

        .nickname {
          font-size: 28rpx;
          color: #666;
          margin-right: 10rpx; // 昵称和图标之间的间距
        }

        .u-icon {
          color: #999; // 图标颜色
        }
      }

      .avatar {
        image {
          width: 54rpx;
          height: 54rpx;
          border-radius: 50%; // 圆形头像
        }
      }
    }
  }

  .btn {
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 30rpx 0;
    background-color: #EA504F;
    margin-top: 30rpx;
    border-radius: 10rpx; // 圆角按钮
  }
}
</style>